<template>
  <div class="flex height-100">
    <div class="logo-img">
      <router-link to="/">
        <img v-if="enterpriseConfig" :src="enterpriseConfig.websiteDefaultLogo" alt="" class="height-31">
      </router-link>
    </div>
    <div class="flex-item pad-l-30 mar-l-9 pad-t-21">
      <template v-if="shopInfo && initShopInfoData && initShopInfoData.shopName">
        <div class="font-18 font-w pad-b-5 flex">
          <div class="flex v-align-c cursor-p" @click="handleShopDetail">
            <span>{{initShopInfoData.shopName}}</span>
            <img :src="iconRightBold" alt="" class="height-15 mar-l-5 mar-t-1">
          </div>
        </div>
        <div class="flex v-align-c">
          <div class="years mar-r-11 pad-l-1 pad-r-1">{{initShopInfoData.virtualYears}}年店</div>
          <div class="flex v-align-c">
            <span class="mar-r-6 font-12">综合服务</span>
            <div class="rate flex v-align-c">
              <span v-for="(item, index) in parseInt(initShopInfoData.virtualLevel)" :key="index" />
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="flex v-align-c search-box mar-t--3">
      <el-input v-model="searchInput" class="input" />
      <el-button class="button" @click="searchGoods('1')">搜索</el-button>
      <el-button class="button all-site" @click="searchGoods('2')">搜全站</el-button>
    </div>
  </div>
</template>

<script lang="ts">
  import iconRightBold from '@/assets/images/icon_right_bold.png'
  import iconCart from '@/assets/images/icon_cart.png'
  import demopic from '@/assets/images/demo_pic_1.png'
  import {
    useState
  } from '@/store/utils/useState'
  import {
    defineComponent,
    ref,
    onMounted,
    watch
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import event from '@/model/event'
  export default defineComponent({
    name: 'LogoShopBar',
    components: {},
    props: {
      advantage: Boolean,
      shopInfo: Boolean,
      shopInfoData: Object
    },
    setup(props, context) {
      const router = useRouter()
      const searchInput = ref('')
      const initShopInfoData = ref({})

      const storeState = useState('enterpriseConfig', ['enterpriseConfig'])
      onMounted(() => {})
      watch(() => props.shopInfoData, (newVal, oldVal) => {
        if (newVal.virtualYears) {
          newVal.virtualYears = parseFloat(newVal.virtualYears) * 1
        }
        initShopInfoData.value = newVal
      })
      const searchGoods = (type: string) => {
        if (type === '2') {
          router.push({
            path: '/category',
            query: {
              title: searchInput.value
            }
          })
        } else {
          context.emit('search')
          event.emit('logoShopBar_search', {
            title: searchInput.value
          })
        }
      }

      const handleShopDetail = () => {
        if (initShopInfoData.value) {
          router.push({
            path: '/shop/detail',
            query: {
              shopId: initShopInfoData.value.shopId
            }
          })
        }
      }

      return {
        iconRightBold,
        iconCart,
        searchInput,
        demopic,
        initShopInfoData,
        searchGoods,
        handleShopDetail,
        ...storeState
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .logo-img {
    padding-top: 34px;

    a {
      display: block;
    }
  }

  .years {
    background: #fbde2d;
    border: #e3c71c 1px solid;
    color: #5C2800;
    font-size: 12px;
  }

  .rate {
    width: 75px;
    height: 14px;
    background: url('@/assets/images/icon_start_all.png') no-repeat;

    span {
      display: block;
      width: 15px;
      height: 14px;
      background: url('@/assets/images/icon_start_1.png') no-repeat;
    }
  }

  .tabs {
    span {
      padding: 2px 12px 3px 12px;
      color: $darkBlue;
      display: inline-block;
      cursor: pointer;

      &.actived {
        background: $darkBlue;
        color: #fff;
      }
    }
  }

  .search-box {
    ::v-deep(.input) {
      --el-input-border-radius: 0;
      --el-input-border-color: $darkBlue;
      --el-input-focus-border: $darkBlue;
      --el-input-hover-border: $darkBlue;
      --el-input-clear-hover-color: $darkBlue;
      --el-input-border: #182245 2px solid;
      width: 448px;
      opacity: 1;
      transition: none;

      &:hover {
        opacity: 1;
        --el-input-border-color: $darkBlue;
        --el-input-focus-border: $darkBlue;
        --el-input-hover-border: $darkBlue;
        --el-input-clear-hover-color: $darkBlue;
        --el-input-border: #182245 2px solid;
      }

      .el-input__inner:hover {
        border-color: #182245;
      }
    }

    ::v-deep(.button) {
      color: #fff;
      background: $darkBlue;
      border-radius: 0;
      border: #182245 1px solid;
      width: 96px;

      &.all-site {
        color: $darkBlue;
        background: #fff;
        border-radius: 0;
        border: $darkBlue 2px solid;
        width: 98px;
        box-sizing: border-box;
        min-height: 40px;
        height: 40px;
        line-height: 37px;
        padding: 0 20px;
      }
    }
  }

  .space-m-box {
    width: 230px;
    height: 43px;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 23px;
    padding: 0 36px 0 43px;

    ul {
      li {
        padding-right: 23px;
        padding-bottom: 12px;

        &:nth-child(even) {
          padding-right: 0px;
        }
      }
    }
  }

  .cart-btn {
    margin-top: 34px;
    padding: 0 21px 0 27px;
    border: #e7e7e7 2px solid;
    position: relative;
    cursor: pointer;

    ::v-deep(.badge) {
      position: absolute;
      left: 48px;
      top: 2px;
      --el-badge-size: 20px;
      --el-badge-padding: 4px;
      --el-badge-font-size: 18px;

      .el-badge__content {
        background-color: #fe2408;
      }
    }
  }
</style>
